<template>
  <el-table-column v-if="type === 'index'"
                   type="index"
                   v-bind="$attrs"
                   :index="calcIndex" />
  <el-table-column v-else-if="type === 'input'"
                   v-bind="$attrs">
    <template slot-scope="scope">
      <el-input :value="scope.row[name]"
                :disabled="disabled(scope.row)"
                :class="errorClass(scope.row)"
                @input="handleInput(scope, arguments)" />
    </template>
  </el-table-column>
  <el-table-column v-else-if="type === 'seats'"
                   v-bind="$attrs">
    <template slot-scope="scope">
      <el-input :value="scope.row[name]"
                :disabled="disabled(scope.row)"
                :class="errorClass(scope.row)"
                maxlength="2"
                oninput="this.value=this.value.replace(/[^\d]/g,'')"
                @input="handleInput(scope, arguments)" />
      <!-- {{disabled(scope.row)}} -->
    </template>
  </el-table-column>
  <el-table-column v-else-if="type === 'input-device'"
                   v-bind="$attrs">
    <template slot-scope="scope">
      <el-input maxlength="15"
                onkeyup="this.value=this.value.replace(/\D/g,'')"
                onafterpaste="this.value=this.value.replace(/\D/g,'')"
                :value="scope.row[name]"
                :disabled="disabled(scope.row)"
                :class="errorClass(scope.row)"
                @input="handleInput(scope, arguments)" />
    </template>
  </el-table-column>
  <el-table-column v-else-if="type === 'enum'"
                   v-bind="$attrs">
    <template slot-scope="scope">
      <el-select v-model="scope.row[name]"
                 placeholder="请选择"
                 :disabled="disabled(scope.row)"
                 :class="errorClass(scope.row)"
                 @input="handleInput(scope, arguments)">
        <el-option v-for="(ele, index) in $attrs.enumArr"
                   :key="index"
                   :label="ele"
                   :value="ele"></el-option>
      </el-select>
    </template>
  </el-table-column>
  <el-table-column v-else-if="type === 'date'"
                   v-bind="$attrs">
    <template slot-scope="scope">
      <el-date-picker v-model="scope.row[name]"
                      type="date"
                      :disabled="disabled(scope.row)"
                      :class="errorClass(scope.row)"
                      style="width: 150px"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                      :editable="false"
                      @input="handleInput(scope, arguments)">
      </el-date-picker>
    </template>
  </el-table-column>
  <el-table-column v-else
                   v-bind="$attrs">
    {{ type }}
  </el-table-column>
</template>

<script>
export default {
  name: "TableColumnImport",
  inheritAttrs: true,
  props: {
    name: {
      type: String
    },
    type: {
      type: String,
      default () {
        return "input";
      }
    }
  },
  computed: {
    disabled () {
      return (row) => {
        return row.disabled;
      };
    },
    errorClass () {
      return (row) => {
        if (!row.errors) {
          return "";
        }
        let hasError =
          row.errors.filter((error) => this.name === error.name).length > 0;
        return hasError ? "has-error" : "";
      };
    }
  },
  methods: {
    calcIndex (index) {
      return index + 1;
    },
    handleInput (scope, [value]) {
      this.$set(scope.row, this.name, value);
      this.$emit("updated", { name: this.name, index: scope.$index, value });
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/.has-error {
  input {
    border: 1px solid var(--prev-color-text-purered);
  }
}
/deep/input::-webkit-outer-spin-button,
/deep/input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
</style>
